<link rel="stylesheet" href="{{ 'component-card.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-price.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-product-grid.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'section-product-recommendations.css' | asset_url }}" media="print" onload="this.media='all'">

<noscript>{{ 'component-card.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-price.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-product-grid.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'section-product-recommendations.css' | asset_url | stylesheet_tag }}</noscript>

<div class="page-width recommendation-ul">
     {%- if cart != empty -%}
     <h2 class="product-recommendations__heading">{{ section.settings.heading | escape }}</h2>
    <twy-recommendation class="twy-recommendation">

      {% assign list_id = '' %}
      {% for item in cart.items %}
       {% assign list_id = list_id | append: item.product_id | append: ', ' %}  
      {% endfor %}

      <product-recommendations id="twy-{{ item.id }}" class="product-recommendations" data-url="{{ routes.product_recommendations_url }}?section_id={{ section.id }}&product_id={{ cart.items.first.product_id }}&limit=4">
        {% for recommendation in recommendations.products %}  
         {% if list_id contains  recommendation.id %}
      
         {% else %}

         <div data-recommendation-id="{{ recommendation.id  }}" class="grid__item">
          {% render 'product-card',
            product_card_product: recommendation,
            media_size: section.settings.image_ratio,
            show_secondary_image: section.settings.show_secondary_image,
            add_image_padding: section.settings.add_image_padding,
            show_vendor: section.settings.show_vendor,
            show_image_outline: section.settings.show_image_outline,
            show_rating: section.settings.show_rating,
            add_to_cart: section.settings.add_to_cart
          %}
        </div>

         {% endif %}
        {% endfor %}
      </product-recommendations>

    </twy-recommendation>
{%- endif -%}

</div>






{% javascript %}
  class ProductRecommendations extends HTMLElement {
    constructor() {
      super();

      const handleIntersection = (entries, observer) => {
        if (!entries[0].isIntersecting) return;
        observer.unobserve(this);

        fetch(this.dataset.url)
          .then(response => response.text())
          .then(text => {
            const html = document.createElement('div');
            html.innerHTML = text;
            const recommendations = html.querySelector('product-recommendations');
            if (recommendations && recommendations.innerHTML.trim().length) {
              this.innerHTML = recommendations.innerHTML;
            }
          })
          .catch(e => {
            console.error(e);
          });
      }

      new IntersectionObserver(handleIntersection.bind(this), {rootMargin: '0px 0px 200px 0px'}).observe(this);
    }
  }

  customElements.define('product-recommendations', ProductRecommendations);
{% endjavascript %}







{% schema %}
  {
    "name": "Cart recommendations",
    "class": "spaced-section collection-grid-section cart-recommendations",
    "settings": [
    {
      "type": "header",
      "content": "t:sections.product-recommendations.settings.header__2.content"
    },
    {
      "type": "text",
      "id": "heading",
      "default": "You may also like",
      "label": "Header"
    },
    {
      "type": "select",
      "id": "image_ratio",
      "options": [
        {
          "value": "adapt",
          "label": "t:sections.product-recommendations.settings.image_ratio.options__1.label"
        },
        {
          "value": "portrait",
          "label": "t:sections.product-recommendations.settings.image_ratio.options__2.label"
        },
        {
          "value": "square",
          "label": "t:sections.product-recommendations.settings.image_ratio.options__3.label"
        }
      ],
      "default": "adapt",
      "label": "t:sections.product-recommendations.settings.image_ratio.label"
    },
    {
      "type": "checkbox",
      "id": "show_secondary_image",
      "default": false,
      "label": "t:sections.product-recommendations.settings.show_secondary_image.label"
    },
    {
      "type": "checkbox",
      "id": "add_image_padding",
      "default": false,
      "label": "t:sections.product-recommendations.settings.add_image_padding.label"
    },
    {
      "type": "checkbox",
      "id": "show_image_outline",
      "default": true,
      "label": "t:sections.product-recommendations.settings.show_image_outline.label"
    },
    {
      "type": "checkbox",
      "id": "show_vendor",
      "default": false,
      "label": "t:sections.product-recommendations.settings.show_vendor.label"
    },
    {
      "type": "checkbox",
      "id": "show_rating",
      "default": false,
      "label": "t:sections.product-recommendations.settings.show_rating.label",
      "info": "t:sections.product-recommendations.settings.show_rating.info"
    },
    {
      "type": "text",
      "id": "add_to_cart",
      "default": "Add to cart",
      "label": "Add to cart"
    }
    ],
    "presets": [
    {
      "name": "Cart recommendations"
    }
  ]
  }
{% endschema %}
